<template>
  <div style="height: 100%">
    <el-row style="height: 78vh; background-color: black" :gutter="20">
      <el-col :span="24" style="height: 100%; background-color: white">
        <div class="header">
          <span style="margin-left: 20px">关键字</span>
          <el-input placeholder="关键字搜索" v-model="req.keyword" style="width: 200px; margin-left: 10px"
            clearable></el-input>
          <el-button style="margin-left: 20px" size="small" @click="
            req.pageIndex = 1
          getMyWebMessages()
            ">
            搜索
          </el-button>
        </div>
        <div>
          <el-tabs @tab-click="getMyWebMessages" v-model="curType">
            <el-tab-pane :label="item.label" v-for="item, index in types" :key="index" :name="item.label">
              <el-table style="overflow: auto" height="680px" :data="res.Items" stripe border highlight-current-row>
                <el-table-column type="index" width="40"></el-table-column>
                <el-table-column prop="MSG_Content" label="消息内容"></el-table-column>
                <el-table-column label="创建日期" width="150px">
                  <template slot-scope="scope">
                    {{ scope.row.MSG_CreateTime | formatDate }}
                  </template>
                </el-table-column>
                <el-table-column prop="RL_Name" label="操作" width="160px">
                  <template slot-scope="scope">
                    <el-button type="text" @click="toUrl(scope.row)">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="width: 100%; height: 40px">
                <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
                  :current-page.sync="req.pageIndex" :total="res.Total" :page-size="req.pageSize"
                  :page-sizes="[5, 10, 15]" @size-change="
                    (val) => {
                      req.pageSize = val
                      getMyWebMessages()
                    }
                  " @current-change="getMyWebMessages()"></el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  getMyWebMessages,
  messageRead
} from '@/api/common/message'
export default {
  data: function () {
    return {
      curType: '未读消息',
      types: [{
        label: '未读消息',
        isRead: false
      }, {
        label: '历史消息',
        isRead: true
      }],
      req: {
        isRead: false,
        pageIndex: 1,
        pageSize: 15,
        keyword: null,
      },
      res: {
        Items: [],
        Total: 0,
      },
    }
  },
  methods: {
    getMyWebMessages: function () {
      this.req.isRead = this.types.find(x => x.label == this.curType).isRead
      getMyWebMessages(this.req).then(({ data }) => {
        this.res = data
      })
    },
    toUrl(item) {
      if (!item.MSG_IsRead) {
        messageRead(item.MSG_ID)
      }
      this.$router.push({
        path: item.MSG_Url,
      })
    }
  },
  mounted() {
    this.getMyWebMessages()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: calc(100% - 60px);
  padding: 10px;
}

.el-table::before {
  z-index: inherit;
}
</style>